/*
 * @Description: 通知列表
 * @Author: Zzt
 * @Date: 2023-02-20 15:49:41
 * @LastEditTime: 2023-02-28 20:07:05
 */
import { IUserParams } from '@/api/announcement/noticeUser';
import { appState } from '@/store/mobx';
import { formatDate } from '@/utils';
import { Button, Popover, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { useEffect, useMemo, useState } from 'react';
import { useAnnouncementContext } from '../contexts/AnnouncementContext';
import PreviewAnnounce from './dialogs/PreviewAnnounce';

const PageList = () => {
  const { selectItems, setSelectKey, announceList, status, getAnnounceList } =
    useAnnouncementContext();
  // 获取列表开始
  const [listQuery, setListQuery] = useState({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);

  /* 切换页码查找列表 */
  useEffect(() => {
    if (listQuery) {
      const userId = appState.userInfo.id;
      let params = {};
      if (status === 0) {
        params = { userId };
      } else {
        params = { userId, status };
      }

      setLoading(true);
      getAnnounceList({ ...listQuery, param: params })
        .then((res: any) => {
          setTotal(res?.totalCount);
          setTimeout(() => {}, 2000);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery, status]);
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };
  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };
  // 获取列表结束

  // 弹窗相关按钮
  /* 公告详情 */
  const [detailsData, setDetailsData] = useState({});
  const [detailsVisible, setDetailsVisible] = useState(false);

  /* 查看 */
  const toView = (data: any) => {
    setDetailsData(data);
    setDetailsVisible(true);
  };
  // 弹窗相关结束

  /* 表格配置 */
  const columns: ColumnsType<IUserParams> = [
    {
      title: '序号',
      dataIndex: ['noticeUser', 'id'],
      key: 'id',
      align: 'center'
    },
    {
      title: '标题',
      dataIndex: ['notice', 'title'],
      key: 'title',
      align: 'center'
    },
    {
      title: '频道',
      dataIndex: ['notice', 'noticeTypeName'],
      key: 'channel',
      align: 'center'
    },
    {
      title: '作者',
      dataIndex: ['notice', 'author'],
      key: 'author',
      align: 'center'
    },
    {
      title: '发布时间',
      dataIndex: ['notice', 'publicTime'],
      key: 'release',
      align: 'center',
      render: (text: any) => <span>{formatDate(text)}</span>
    },
    {
      title: '状态',
      dataIndex: ['noticeUser', 'status'],
      key: 'status',
      align: 'center',
      render: (text) => (text === 1 ? <span>未读</span> : <span>已读</span>)
    },
    {
      title: '操作',
      dataIndex: 'notice',
      key: 'notice',
      align: 'center',
      width: '30%',
      render: (_: any, record: any) => {
        return (
          <>
            <Button type="link" onClick={() => toView(record)}>
              查看
            </Button>
          </>
        );
      }
    }
  ];

  return (
    <>
      <Table
        dataSource={announceList}
        loading={loading}
        rowKey={(record) => record.noticeUser.id}
        size="small"
        scroll={{ x: 'max-content' }}
        bordered
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
        columns={columns}
      />

      {useMemo(
        () => (
          <PreviewAnnounce
            onClose={() => setDetailsVisible(false)}
            visible={detailsVisible}
            data={detailsData}
          />
        ),
        [detailsVisible, detailsData]
      )}
    </>
  );
};
export default PageList;
